<template>
  <div class="container">
    <el-card>
      <!-- 布局 -->
      <el-row :gutter="20">
        <el-col :span="20">
          <div class="label">
            <el-form label-width="80px"  ref="form" :inline=true>
              <el-form-item label="学科名称">
                <el-input v-model="form.subjectName" ></el-input>
              </el-form-item>
              <el-form-item style="text-align:right">
                <el-button size="small" @click="handleRemove">清除</el-button>
                <el-button type="primary" size="small" @click="handleSearch()">搜索</el-button>
              </el-form-item>
            </el-form>

          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-button
            type="success"
            size="small"
            class="el-add el-icon-edit"
            @click="handleClick"
            >
            新增学科
            </el-button>
          </div>
        </el-col>
      </el-row>

      <!-- alert 警告 -->
      <el-alert  type="info" show-icon>数据一共 {{counts}}条</el-alert>

       <!-- 表格组件 -->
      <el-table :data="list" style="width: 100%" loading="isLoading">
        <el-table-column label="序号"  type="index" width="80" :index="handleIndex"></el-table-column>
        <el-table-column label="学科名称" prop="subjectName" width="80"></el-table-column>
        <el-table-column label="创建者" prop="username" width="110"></el-table-column>
        <el-table-column label="创建日期" prop="addDate" width="150"
          :formatter="formatterMoment"
        ></el-table-column>
        <el-table-column label="前台是否显示" prop="isFrontDisplay" width="130"></el-table-column>
        <el-table-column label="二级目录" prop="twoLevelDirectory" width="130"></el-table-column>
        <el-table-column label="标签" prop="tags" width="120"></el-table-column>
        <el-table-column label="题目数量" prop="totals" width="120"></el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
          <el-button size="mini"  type="text" @click="$router.push(`/directorys?id=${row.id}&name=${encodeURIComponent(row.subjectName)}`)">学科分类</el-button>
          <el-button size="mini"  type="text" @click="$router.push(`/tags?id=${row.id}&name=${encodeURIComponent(row.subjectName)}`)">学科标签</el-button>
          <el-button size="mini"  type="text" @click="edit(row)">修改</el-button>
          <el-button size="mini"  type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
        <div class="pagination">
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[1, 2, 3, 4, 5, 10, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts">
        </el-pagination>
        </div>
    </el-card>

  <!-- 弹框 -->
  <SubjectAdd :showDialog.sync="showDialog" @addSubject="getSubjectList"  :data="currSubject" ref="subjectsadd"></SubjectAdd>
  </div>
</template>

<script>
import { list as getSubjects, remove } from '@/api/hmmm/subjects'
import moment from 'moment'
import SubjectAdd from '../components/subjects-add.vue'

export default {
  components: {
    SubjectAdd
  },
  data () {
    return {
      list: [],
      subjectName: '', // 学科名称
      page: 1, // 当前页
      pagesize: 10, // 条数
      counts: 0,
      showDialog: false,
      isLoading: false,
      currSubject: {},
      // 这个是搜索框里的
      form: {
        subjectName: '', // 学科名
        page: 1, // 当前页
        pagesize: 10 // 条数
      }

    }
  },
  created () {
    this.getSubjectList()
  },
  methods: {
    // 获取学科列表
    async getSubjectList () {
      this.isLoading = true
      const { data } = await getSubjects(this.form)
      // console.log(data)
      this.list = data.items
      this.counts = data.counts
      this.isLoading = false
      // console.log(this.list)
    },
    // 处理分页问题
    handleSizeChange (val) {
      // 更新每页条数
      this.pagesize = val
      // 重置成第一页
      this.page = 1
      // 重新渲染
      this.getSubjectList()
    },
    handleCurrentChange (val) {
      // 当前页数
      this.page = val
      this.getSubjectList()
    },
    // 处理序号
    handleIndex (index) {
      return (index + 1) + (this.page - 1) * this.pagesize
    },
    // 处理日期
    formatterMoment (row, column, cellValue, index) {
      return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    // 点击清除按钮清除输入框内容
    handleRemove () {
      this.form = {
        name: ''
      }
    },
    // 处理筛选
    handleSearch () {
      this.form.page = 1
      this.getSubjectList()
    },
    // 处理新增学科弹框
    handleClick () {
      this.showDialog = true
    },
    // 处理修改内容 发请求 进行回显
    async edit (list) {
      this.showDialog = true
      this.currSubject = list || {}
      // 延迟执行
      this.$nextTick(() => {
        // 调用子组件方法
        this.$refs.subjectsadd.open()
        console.log(11111);
      })
    },
    // 新增|修改 后更新列表
    // updateList () {
    //   if (!this.currSubject.id) {
    //     this.requestParams.page = 1
    //   }
    //   this.getList()
    // },
    // 删除学科内容
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示').then(async () => {
        await remove({ id })
        this.$message.success('删除学科成功')
        this.getSubjectList()
      }).catch(() => {
        console.log('取消')
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.label {
  display: flex;
}
.el-button {
  margin-left: 10px;
  width: 60px;
  height: 40px;
}
.el-add {
  float: right;
  width: 100px;
}
.pagination{
  float: right;
  margin-top: 10px;
  margin-bottom: 10px;
}

.el-table .el-button{
    width: 100px;
  }

</style>
